<template>

  <div>
    <van-nav-bar
      title="商品  评价  详情"
      left-text="返回"
      right-text="分享"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <img :src="item.url" alt="" width="100%" height="200rem" />
    <h1>{{ item.title }}</h1>

    <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
  <van-action-bar-icon icon="cart-o" text="购物车" />
  <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
  <van-action-bar-button type="warning" text="加入购物车" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
    <van-action-sheet
  v-model:show="show"
  :actions="actions"
  cancel-text="取消"
  close-on-click-action
  @cancel="onCancel"
/>

  </div>
</template>

<script setup>

import { ref } from 'vue';
import { showToast } from 'vant';

import { useRoute } from "vue-router";
const route = useRoute();
const item = route.query;

import {useRouter} from "vue-router";

const router =new useRouter();
const onClickLeft=()=>{
    router.push('/home')
}

 const show = ref(false);
    const actions = [
      { name: '选项一' },
      { name: '选项二' },
      { name: '选项三' },
    ];
    const onCancel = () => showToast('取消');

const onClickRight={
    name: '分享',
    icon: 'chat-o',
    color: '#ee0a24',
    onClick: () => {
      showToast('分享');
    },
  };


</script>

<style lang="scss" scoped>
</style>